<template>
	<view class="content" @touchend="onTouchEnd" :style="{'height':minHeight,overflow:overflow}">

		<scroll-view class="app-list" scroll-x="true">
			<view class="scroll-view-item" v-for="(item,i) in applist" @click="GoThisApp(item)" :key="i">
				<image class="item-logo" :src="item.logo"></image>
				<view class="item-title">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		
		<view id="message-list" class="message-list" :style="{'min-height':minHeight}">
			<sesstion-list :options="options" :messagesList="messages" :bindClickBtn="bindClickBtn" :toSesscton="toSesscton"></sesstion-list>
		</view>

		<view v-if="islink & !isHide & clientid.length > 0" style=" display: block; width: 100%; color: #808080; margin-top: 20px; text-align: center;">当前已以连接</view>
		<view v-else-if="!isHide & clientid.length > 0" style="display: block; width: 100%; color: #808080; margin-top: 20px; text-align: center; color: red;">当前已掉线</view>
		<view v-if="!isHide & userId & clientid.length > 0" style="display: block;width: 100%; color: #808080; margin-top: 10px; text-align: center;">当前用户ID：{{ userId }}</view>
		<view v-if="!isHide & clientid.length > 0" style="display: block;width: 100%; color: #808080; margin-top: 10px; text-align: center;">上次心跳间隔时间：{{ heartbeatintervaltime }}s</view>
		<view v-if="!isHide & clientid.length > 0" style="display: block;width: 100%; color: #808080; margin-top: 10px; text-align: center;">上次收到心跳时间：{{ heartbeattime }}</view>
		<view v-if="!isHide & clientid.length > 0" style="display: block;width: 100%; color: #808080; margin-top: 10px; text-align: center;">client：{{ clientid }}</view>

		<uni-fab :pattern="pattern" :content="content" :nav="openNav" :headImg="headImg" :horizontal="horizontal" :vertical="vertical"
		 :direction="direction" @trigger="triggerevent()"></uni-fab>
	</view>
</template>

<script>
	import sesstionList from '../../components/sesstion-list.vue';
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import uniFab from '@/components/uni-fab.vue';
	import AppChat from '@/common/js/chat/app-chat.js';
	import helper from '@/common/js/chat/helper.js';
	import Global from '@/common/js/chat/config.js';
	import Request_1 from '@/common/js/chat/Request.js';

	import App from '@/common/js/chat/config.js';
	
	import PageParamter from './Parameter.js'
	import Method from './methods.js'
	

	import {
		mapMutations
	} from 'vuex';
	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			sesstionList,
			uniFab,
			uniIcon
		},
		data() {
			return PageParamter;
		},

		computed: {
			...mapState(['pushmsg', 'pageSesstion'])
		},

		watch: {
			pageSesstion(val, oldVal) {
				console.log(val);

				this.sesstion = val;
				console.log('update sesstion:' + this.sesstion);
			},
			pushmsg(item, oldVal) {
				AppChat.Task(this, item);
			}
		},

		onShow: function() {
			this.isHide = false;
			this.sesstion = '0';

			var userInfo = Global.UserInfo();
			this.headImg = userInfo.paras && userInfo.paras.headImg || 'https://avatar.bbs.miui.com/images/noavatar_small.gif';

			AppChat.Reload();

		},
		onHide: function() {
			this.isHide = true;
		},
		onLoad() {
			var that = this;
			AppChat.Init(that);
			var getUserInfo = setInterval(function() {
				var userInfo = Global.UserInfo();
				if (userInfo.id) {
					
					that.userKey = userInfo.id;
					that.headImg = userInfo.paras && userInfo.paras.headImg || 'https://avatar.bbs.miui.com/images/noavatar_small.gif';
					
					clearInterval(getUserInfo);
					if (userInfo.paras.userName == '未定义' || !userInfo.paras.headImg) {
						var info = '';
						if (userInfo.paras.userName == '未定义' && !userInfo.paras.headImg) {
							info = '用户信息未设置，前往设置？';
						}
						if (userInfo.paras.userName == '未定义') {
							info = '用户名未设置，前往设置？';
						}
						if (!userInfo.paras.headImg) {
							info = '用户头像未设置，前往设置？';
						}
						uni.showModal({
							title: '提醒',
							content: '用户信息未设置，前往设置？',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../userInfo/userInfo'
									});
								} else if (res.cancel) {
									uni.showToast({
										title: '请即时修改哦',
										duration: 2000,
										position: 'bottom'
									});
								}
							}
						});
					}
				}
			}, 2000);

		},
		methods: {
			...mapMutations(['setMsg']),
			
			messagelist() {
				// this.ClientRect.exec();
			},
			
			GoThisApp:function(item){
				Method.ToWebView(item,helper);
			},

			onTouchEnd: function(e) {

				var that = this;

				setTimeout(that.messagelist, 20);

			},


			tobottom() {
				uni.navigateTo({
					url: '../userInfo/userInfo'
				});
			},
			toSesscton: function(item, type) {
				this.sesstion = item.key;
				item.count = 0;

				helper.SetSesstion(this.messages);

				if (type == 1) {
					console.log('进入系统消息界面' + i);
				} else {
					uni.navigateTo({
						url: '../chat/chat?sesstion=' + item.key + '&userName=' + item.title + '&headImg=' + item.url[0]
					});
				}
			},

			triggerevent(e) {
				console.log(e);
				this.content[e.index].active = !e.item.active;
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},

		mounted: function() {
			var that = this;
			Method.PageInit(this,Request_1,helper);
		},
		onNavigationBarSearchInputChanged(e) {
			console.log(JSON.stringify(e));
		},
		onNavigationBarSearchInputConfirmed(e) {
			console.log('Search:'+e.text)
		},
		onNavigationBarButtonTap:function(e){
			Method.onNavigationBarButtonTap(this,e, helper, Global, Request_1, AppChat);
		}

	};
</script>

<style scoped="true" lang="scss">
	.floating-menus {
		position: fixed;
		top: 0;
		right: 20upx;
		z-index: 10;
		opacity: 0;
		transition: all 0.4s;
		height: 0;
		overflow: hidden;
	}

	.floating-menus {
		&.show {
			opacity: 1;
			height: auto;
		}

		&.hidden {
			opacity: 0;
			height: 0;
		}
	}
	
	.app-list{
		height: 80px; 
		background: #f2f2f2;
		white-space: nowrap;
		width: 100%;
		.scroll-view-item{
			display: inline-block;
			height: 100%;
			width: 70px;
			padding: 0px 5px 0px 5px;
			text-align: center;
			.item-logo{
				max-height: 50px;
				max-width: 50px;
				border-radius: 50%;
				border: 2px #eaeaea solid;
			}
			.item-title{
				display: block;
				line-height: 20upx;
				padding: 0;
				font-size: 12px;
				color: #333333;
			}
		}
	}
</style>
